<template>
    <view class="container">
        <!--轮播-->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <swiper-item>
                <view class="swiper-item">
                    <image src="http://211.101.233.71:9000/hkg/admin/article/8a1ba4eb-6076-4668-a238-cd2e47095ca5.png" class="banner-img"></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <image src="http://211.101.233.71:9000/hkg/admin/article/8a1ba4eb-6076-4668-a238-cd2e47095ca5.png" class="banner-img"></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <image src="http://211.101.233.71:9000/hkg/admin/article/8a1ba4eb-6076-4668-a238-cd2e47095ca5.png" class="banner-img"></image>
                </view>
            </swiper-item>
        </swiper>
		<!--列表-->
		<view class="list">
			<card
			 v-for="(article, index) in articleList" 
			:key="index"
			
			 :title="article.article.articleTitle"
			 :author-name= "article.author.userName"
			 :article-content="article.article.articleContent"
			 :views="article.article.readTime"
			 :article-id="article.article.articleId"
			 ></card>
		</view>
		
    </view>
	
</template>

<script>
	import card from '../card/card.vue'
export default {
	components:{
		card
	},
    data() {
        return {
            articleList: [], // 用于存储获取到的文章列表
        };
    },
    mounted() {
        this.fetchAllArticles();
    },
    methods: {
		
        async fetchAllArticles() {
			console.log('获取文章中')
            await uni.request({
                url: 'http://hkg.ggdogweb.top:8085/blogapi/article/getAllArticleWithTags',
                method: 'POST',
                data: {
                    userId: 1 // 这里假设用户 ID 为 1，你需要根据实际情况修改
                },
                success: (response) => {
                    this.articleList = response.data;
                }
            });
        },
        formatDate(date) {
            if (date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
            return '';
        },
        
    },
	
	onLoad() {
	  this.$eventBus.$on('refresh-blog', this.fetchAllArticles);
	},
	onUnload() {
	  this.$eventBus.$off('refresh-blog', this.fetchAllArticles);
	},
};
</script>

<style lang="scss" scoped>
.swiper-item,
.banner-img {
    width: 100%;
    height: 100%;
}

.list {
    padding: 10px;
}

.article-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.article-author {
    color: #666;
    margin-bottom: 5px;
}

.article-tags {
    color: #999;
    margin-bottom: 5px;
}

.article-create-date {
    color: #999;
}
</style>    